{% extends "base.jinja" %}
{% block content %}
<div class="container content">
  <div class="box">
    <div class="block"><p class="title is-4">{{ data['title'] }}</p></div>
    <div class="block">
    <ol type="1">
{%- for section in data['sections'] %}
      <li><a href="#{{ section['id'] }}">{{ section['title'] }}</a></li>
{% endfor %}
    </ol>
    </div>
  <article class="message is-warning is-size-7">
    <div class="message-header"><p>Warning</p></div>
    <div class="message-body">Statistics can be inaccurate.</div>
  </article>
  </div>
                            {#- each statistics section -#}
{% for section in data['sections'] %}
  <div id="{{ section['id'] }}" class="box">
    <p class="title is-4">{{ section['title'] }}</p>
    <nav class="level">
      {% if 'chart' in section %}<div class="level-item"><img src="{{ base['url_to'](section['chart']) }}"></div>{% endif %}
      <div class="level-item">
        <ul>
          <ol type="1">
{% for item in section['items'] -%}
            <li>{{ item }}</li>
{% endfor -%}
          </ol>
        </ul>
      </div>
    </nav>
    <p class="is-size-7 has-text-right"><a href="#">Back to top</a></p>
  </div>
{% endfor %}
</div>
{% endblock %}